<!-- 专属定制 -->
<template>
  <!-- 头部 -->
  <div class="custor-header">
    <sort-title-vue
      :title="custorHeaderTitle"
      :isShowTitle="isShowTitle"
      class="add-title"
    ></sort-title-vue>
    <div v-if="store.state.m_user.cookie.length < 5" style="text-align: center">
      登录后即可查看~
    </div>
    <!-- 头部轮播(未开发) -->
    <div class="custor-swiper">
      <song-list-cover-vue
        :songListCoverData="headerData"
      ></song-list-cover-vue>
    </div>
  </div>
  <!-- 内容区 -->
  <div class="custor-container" v-infinite-scroll="load">
    <sort-title-vue
      :title="custorContentTitle"
      :isShowTitle="isShowTitle"
    ></sort-title-vue>
    <song-list-cover-vue
      :songListCoverData="custorContentData"
    ></song-list-cover-vue>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import axios from "axios";
import songListCoverVue from "../../../../components/songListCover/songListCover.vue";
import sortTitleVue from "../../../../components/sortTitle/sortTitle.vue";

const store = useStore();
const route = useRoute();

// 传递给sortTitle子组件数据 store.state.m_user.userInfo.nickname
const custorHeaderTitle = `${
  store.state.m_user.cookie.length > 5
    ? store.state.m_user.userInfo.nickname
    : "你的"
}的雷达歌单`;
const isShowTitle = false;

// 头部数据
const headerData = ref([]);

// 获取头部轮播数据
const getHeaderData = async () => {
  if (store.state.m_user.cookie.length < 5) return;
  await axios
    .get(`/recommend/resource?cookie=${store.state.m_user.cookie}`)
    .then((res) => {
      /**
       * 只拿前五个数
       */
      res.data.recommend.forEach((ele, index) => {
        if (index < 5) {
          headerData.value.push(ele);
        }
      });
    })
    .catch((err) => {
      console.error(err);
    });
};
getHeaderData();

// 内容区数据
let custorContentData = ref([]);
// 请求数据基数
const base = ref(1);

// 请求次数 用于节流(总数据/单次请求的数据量)
const timeNum = ref([true, true, true, true]);
/**
 * 12 打开你的音乐假日
 */
const custorContentTitle = "听音乐，用网易 !";

// 获取内容区数据
const getCustorContentData = async () => {
  await axios
    .post(
      `/personalized?limit=${30 * base.value}&cookie=${
        store.state.m_user.cookie
      }`
    )
    .then((res) => {
      res.data.result.forEach((ele, index) => {
        // 判断是不是第一次请求
        if (base.value > 1) {
          // 如果不是第一次请求 push 的元素应该是第一次请求之外的
          if (index >= (base.value - 1) * 30) {
            custorContentData.value.push(ele);
          }
        } else {
          // 第一次请求
          custorContentData.value.push(ele);
        }
      });
      base.value++;
    })
    .catch((err) => {
      console.error(err);
    });
};
getCustorContentData();

// 监听页面滚动 触底重新发起请求(用element ui 代替)
window.onscroll = () => {
  return;
  if (route.path != "/findMusic/customization") return;
  // 如果滚动距离小于 1100
  if (document.documentElement.scrollTop < 1099) return;
  // 如果滚动距离在 1100 - 1200 的倍数之间
  if (
    document.documentElement.scrollTop % 1100 >= 10 &&
    document.documentElement.scrollTop % 1100 <= 100
  ) {
    // 节流
    if (
      timeNum.value[base.value] == true &&
      timeNum.value[parseInt(document.documentElement.scrollTop / 1100) + 1] ==
        true
    ) {
      // 关闭阀门变量
      timeNum.value[base.value] = false;
      console.log(parseInt(document.documentElement.scrollTop / 1100) + 1);
      // 重新请求
      getCustorContentData();
    }
  }
};

// 触底加载
const load = () => {
  // 重新请求
  getCustorContentData();
};
</script>
<style lang="less">
.custor-header {
  //   .custor-swiper {
  //     .list-cover-contauner {
  //       overflow: hidden;
  //       display: block;
  //       height: 270px;

  //       .song-list-cover {
  //         display: block;
  //         float: left;
  //         margin-right: 16px;
  //       }
  //     }
  //   }

  .add-title {
    position: relative;
    margin-bottom: 20px;

    &::after {
      content: "根据你的红心收藏为你推荐更多宝藏歌曲";
      position: absolute;
      color: #0000005b;
      top: 28px;
    }
  }
}

.custor-container {
  margin-top: 20px;
  .list-cover-contauner {
    margin-top: 4px;
  }
}
</style>